<template>
  <div class="card">
    <div class="card-body">
      <div class="row">
        <div className="col-4" v-for="(item, key) in payments" :key="key">
          <input id="{item.id}" name="paymentMethod" type="radio" className="custom-control-input" />
          <label className="custom-control-label" htmlFor="{item.id}">
            {{ item.name }}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const payments = reactive([
  { id: 'credit', name: 'Credit card' },
  { id: 'debit', name: 'Debit card' },
  { id: 'paypal', name: 'Paypal' }
])
</script>
